<template>
  <div class="image-grid-container">
    <!-- 视图切换 -->
    <div class="view-controls">
      <el-radio-group v-model="viewMode" size="small">
        <el-radio-button label="grid">
          <el-icon><Grid /></el-icon>
          网格视图
        </el-radio-button>
        <el-radio-button label="list">
          <el-icon><List /></el-icon>
          列表视图
        </el-radio-button>
      </el-radio-group>
      
      <div class="grid-size-control" v-show="viewMode === 'grid'">
        <span>大小:</span>
        <el-slider
          v-model="gridSize"
          :min="200"
          :max="400"
          :step="50"
          :show-tooltip="false"
          style="width: 100px; margin-left: 10px;"
        />
      </div>
    </div>
    
    <!-- 网格视图 -->
    <div 
      v-if="viewMode === 'grid'" 
      class="image-grid"
      :style="{ '--grid-size': gridSize + 'px' }"
    >
      <div
        v-for="image in images"
        :key="image.id"
        class="image-card"
        @click="handleImageClick(image)"
      >
        <div class="image-container">
          <img 
            :src="image.fileUrl" 
            :alt="image.originalName"
            class="image-preview"
            @load="handleImageLoad"
            @error="handleImageError"
          />
          
          <!-- 图片遮罩层 -->
          <div class="image-overlay">
            <div class="image-actions">
              <el-button 
                type="primary" 
                :icon="View" 
                circle 
                size="small"
                @click.stop="handlePreview(image)"
              />
              <el-button 
                type="success" 
                :icon="Edit" 
                circle 
                size="small"
                @click.stop="handleGenerateText(image)"
              />
              <el-button 
                type="warning" 
                :icon="CopyDocument" 
                circle 
                size="small"
                @click.stop="handleExpandImage(image)"
              />
              <el-button 
                type="danger" 
                :icon="Delete" 
                circle 
                size="small"
                @click.stop="handleDelete(image)"
              />
            </div>
            
            <!-- AI状态指示器 -->
            <div class="ai-status" :class="getAiStatusClass(image.aiRecognitionStatus)">
              {{ getAiStatusText(image.aiRecognitionStatus) }}
            </div>
          </div>
        </div>
        
        <!-- 图片信息 -->
        <div class="image-info">
          <div class="image-name" :title="image.originalName">
            {{ image.originalName }}
          </div>
          <div class="image-meta">
            <span>{{ formatFileSize(image.fileSize) }}</span>
            <span>{{ image.width }}×{{ image.height }}</span>
            <span>{{ formatTime(image.createdAt) }}</span>
          </div>
          
          <!-- 标签 -->
          <div class="image-tags" v-if="image.tags && image.tags.length > 0">
            <el-tag 
              v-for="tag in image.tags.slice(0, 3)" 
              :key="tag"
              size="small"
              class="tag-item"
              @click.stop="handleTagClick(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-tag 
              v-if="image.tags.length > 3"
              size="small"
              type="info"
              class="tag-item"
              @click.stop="handleShowAllTags(image)"
            >
              +{{ image.tags.length - 3 }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 列表视图 -->
    <div v-else class="image-list">
      <div
        v-for="image in images"
        :key="image.id"
        class="list-item"
        @click="handleImageClick(image)"
      >
        <div class="list-image">
          <img 
            :src="image.fileUrl" 
            :alt="image.originalName"
            class="list-preview"
          />
        </div>
        
        <div class="list-content">
          <div class="list-header">
            <h3 class="list-title">{{ image.originalName }}</h3>
            <div class="list-actions">
              <el-button 
                type="primary" 
                :icon="View" 
                size="small"
                @click.stop="handlePreview(image)"
              >
                预览
              </el-button>
              <el-button 
                type="success" 
                :icon="Edit" 
                size="small"
                @click.stop="handleGenerateText(image)"
              >
                生成文案
              </el-button>
              <el-button 
                type="warning" 
                :icon="CopyDocument" 
                size="small"
                @click.stop="handleExpandImage(image)"
              >
                图片扩展
              </el-button>
            </div>
          </div>
          
          <div class="list-meta">
            <div class="meta-row">
              <span><strong>尺寸:</strong> {{ image.width }}×{{ image.height }}</span>
              <span><strong>大小:</strong> {{ formatFileSize(image.fileSize) }}</span>
              <span><strong>格式:</strong> {{ image.mimeType.split('/')[1].toUpperCase() }}</span>
            </div>
            <div class="meta-row">
              <span><strong>上传时间:</strong> {{ formatTime(image.createdAt) }}</span>
              <span><strong>使用次数:</strong> {{ image.usageCount }}</span>
              <div class="ai-status-inline" :class="getAiStatusClass(image.aiRecognitionStatus)">
                {{ getAiStatusText(image.aiRecognitionStatus) }}
              </div>
            </div>
          </div>
          
          <div class="list-tags" v-if="image.tags && image.tags.length > 0">
            <el-tag 
              v-for="tag in image.tags" 
              :key="tag"
              size="small"
              class="tag-item"
              @click.stop="handleTagClick(tag)"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="images.length === 0 && !loading" class="empty-state">
      <el-icon size="64" color="rgba(255,255,255,0.5)"><Picture /></el-icon>
      <h3>暂无图片</h3>
      <p>{{ emptyMessage }}</p>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <el-icon class="loading-icon"><Loading /></el-icon>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  View, Edit, Delete, CopyDocument, Grid, List, Picture, Loading 
} from '@element-plus/icons-vue'
import type { ImageModel } from '@/types'
import { formatFileSize, formatTime } from '@/utils'

interface Props {
  images: ImageModel[]
  loading?: boolean
  emptyMessage?: string
}

interface Emits {
  (e: 'image-click', image: ImageModel): void
  (e: 'preview', image: ImageModel): void
  (e: 'generate-text', image: ImageModel): void
  (e: 'expand-image', image: ImageModel): void
  (e: 'delete', image: ImageModel): void
  (e: 'tag-click', tag: string): void
  (e: 'show-all-tags', image: ImageModel): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  emptyMessage: '没有找到符合条件的图片'
})

const emit = defineEmits<Emits>()

// 响应式数据
const viewMode = ref<'grid' | 'list'>('grid')
const gridSize = ref(250)

// 方法
const handleImageClick = (image: ImageModel) => {
  emit('image-click', image)
}

const handlePreview = (image: ImageModel) => {
  emit('preview', image)
}

const handleGenerateText = (image: ImageModel) => {
  emit('generate-text', image)
}

const handleExpandImage = (image: ImageModel) => {
  emit('expand-image', image)
}

const handleDelete = (image: ImageModel) => {
  emit('delete', image)
}

const handleTagClick = (tag: string) => {
  emit('tag-click', tag)
}

const handleShowAllTags = (image: ImageModel) => {
  emit('show-all-tags', image)
}

const handleImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.classList.add('loaded')
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  // 使用一个简单的灰色占位图片
  img.src = ''
}

const getAiStatusClass = (status: string) => {
  switch (status) {
    case 'SUCCESS': return 'status-success'
    case 'FAILED': return 'status-failed'
    default: return 'status-pending'
  }
}

const getAiStatusText = (status: string) => {
  switch (status) {
    case 'SUCCESS': return 'AI识别成功'
    case 'FAILED': return 'AI识别失败'
    default: return 'AI识别中'
  }
}
</script>

<style scoped>
.image-grid-container {
  width: 100%;
}

.view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
}

.grid-size-control {
  display: flex;
  align-items: center;
  color: white;
  font-size: 14px;
}

/* 网格视图样式 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-size), 1fr));
  gap: 20px;
}

.image-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.image-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.image-container {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  opacity: 0;
}

.image-preview.loaded {
  opacity: 1;
}

.image-card:hover .image-preview {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
}

.image-card:hover .image-overlay {
  opacity: 1;
}

.image-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.ai-status {
  align-self: flex-end;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-success {
  background-color: rgba(103, 194, 58, 0.8);
  color: white;
}

.status-failed {
  background-color: rgba(245, 108, 108, 0.8);
  color: white;
}

.status-pending {
  background-color: rgba(230, 162, 60, 0.8);
  color: white;
}

.image-info {
  padding: 15px;
  color: white;
}

.image-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.image-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.image-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  transform: scale(1.05);
}

/* 列表视图样式 */
.image-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.list-item {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.list-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.list-image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.list-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-content {
  flex: 1;
  padding: 20px;
  color: white;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.list-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  margin-right: 20px;
}

.list-actions {
  display: flex;
  gap: 8px;
}

.list-meta {
  margin-bottom: 15px;
}

.meta-row {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.ai-status-inline {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
}

.list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* 空状态和加载状态 */
.empty-state,
.loading-state {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.7);
}

.empty-state h3 {
  margin: 20px 0 10px 0;
  color: white;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-icon {
  font-size: 32px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .view-controls {
    flex-direction: column;
    gap: 15px;
  }
  
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }
  
  .list-item {
    flex-direction: column;
  }
  
  .list-image {
    width: 100%;
    height: 200px;
  }
  
  .list-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .list-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .meta-row {
    flex-direction: column;
    gap: 8px;
  }
}
</style>